<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .active{
            color: red;;
        }
    </style>
</head>
<body>
	<!-- <div id="app">
		<ul>
			<li v-for="(item,index) in names" 
                :class="{active:currentIndex === index}" 
                @click="liClick(index)">{{item}}</li>
		</ul>
	</div>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				names:['xiaoqiao','xiaosheng','xiaonan'],
				currentIndex:0
			},
			methods:{
				liClick(index){
					this.currentIndex = index
				}
			}
		})
	</script> -->
    <div id="root">
        <ul>
            <li v-for="(item,index) in names"
                :class="{active:col === index}"
                @click="handel(index)"
            >{{item}}</li>
        </ul>
    </div>
</body>
</html>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            names:['a','b','c','d'],
            col:0

        },
        methods:{
           handel(index){
               this.col = index
           }
        }
    })
    console.log(item)
</script>

